<template>
  <div class="list">
      <div class="header" style="background-color: #F3F3F3; overflow: hidden">
          <span class="c1">优惠券列表</span>
          <el-button class="return" icon="el-icon-arrow-left" @click="returnPage">返回</el-button>
          <el-button class="refush" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>

      <div class="container" style="background-color: #F3F3F3; overflow: hidden">
          <span class="c2 el-icon-search">筛选查询</span>
          <el-button class="b3" @click="retrieve">高级检索</el-button>
      </div>

      <div class="container2">
          <el-form class="con3" label-width="auto">
              <el-form-item class="you" label="优惠券名称:">
                  <el-col :span="5">
                      <el-input v-model="refCouponName" placeholder="广告名称" @input="getScreen()"/>
                  </el-col>
                  发放方式：
                  <el-select class="fa" v-model="refGrant" placeholder="全部" @change="getScreen()">
                      <el-option label="全部" :value=0></el-option>
                      <el-option label="自动发放" :value=2></el-option>
                      <el-option label="活动领取" :value=3></el-option>
                      <el-option label="人工发放" :value=4></el-option>
                      <el-option label="无限制" :value=5></el-option>
                  </el-select>
                  优惠券状态：
                  <el-select v-model="refOnline" placeholder="上线/下线" @change="getScreen()">
                      <el-option label="上线/下线" :value=0></el-option>
                      <el-option label="上线" :value=2></el-option>
                      <el-option label="下线" :value=3></el-option>
                  </el-select>
                  <el-button class="cz" @click="cz()">重 置</el-button>
              </el-form-item>
          </el-form>
      </div>

      <div class="foot" style="background-color: #F3F3F3; overflow: hidden">
          <span class="c2 el-icon-menu">数据列表</span>
          <router-link to="/coupon/add"><el-button class="b2">添加优惠券</el-button></router-link>
      </div>

      <div class="foot1">
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                  border @filter-change="tableChange"
                  style="width: 100%" :default-sort="{prop: 'couponCode', order: 'descending'}">
              <el-table-column fixed type="selection" width="60" align="center"/>
              <el-table-column prop="couponCode" label="编号" width="100" align="center" sortable/>
              <el-table-column prop="couponName" label="优惠券名称" width="150" align="center"/>
              <el-table-column prop="startDate" label="开始时间" width="200" align="center" sortable/>
              <el-table-column prop="endDate" label="结束时间" width="200" align="center" sortable/>
              <el-table-column prop="online" label="上线/下线" width="100" align="center">
                  <template v-slot="scoped">
                      <el-switch v-model="scoped.row.online" active-color="green" inactive-color="red" @change="getState(scoped)">
                      </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop="grant" label="发放方式" width="120" align="center"/>
                  <el-table-column prop="issueQuantity" label="数量" width="100" align="center"/>
                  <el-table-column fixed="right" label="操作" width="100" align="center">
                  <template slot-scope="scope">
                      <el-button @click="lookOver(scope.row)" type="text" size="small">查看</el-button>
                      <el-popover placement="top" width="160" trigger="click">
                          <p>这一段内容确定删除吗？</p>
                          <div style="text-align: right; margin: 0">
                              <el-button size="mini" type="text" @click="delpop">取消</el-button>
                              <el-button type="primary" size="mini" @click="delpop ; deleteLine(scope.row)">确定</el-button>
                          </div>
                          <el-button size="small" slot="reference" type="text">删除</el-button>
                      </el-popover>
                  </template>
              </el-table-column>
          </el-table>

          <div class="page">
              <el-pagination
                      align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                      :page-sizes="[3,5,7,9]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                      :total="tableData.length" class="page2">
              </el-pagination>
          </div>

          <el-dialog title="高级检索" :visible.sync="retrieve2">
              <el-form :model="tableData" style="padding:0 1vw;">
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item class="you" label="优惠券名称:">
                              <el-row class="demo-autocomplete">
                                  <el-col :span="17">
                                      <el-autocomplete
                                              popper-class="my-autocomplete"
                                              v-model="RetCouponName"
                                              :fetch-suggestions="querySearch"
                                              placeholder="优惠券"
                                              @select="handleSelect">
                                          <i slot="suffix" @click="handleIconClick"></i>
                                          <template slot-scope="{ sreachData }">
                                              <div class="couponName">{{ sreachData.couponName }}</div>
                                              <span class="couponCode">{{ sreachData.couponCode }}</span>
                                          </template>
                                      </el-autocomplete>
                                  </el-col>
                              </el-row>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="发放方式：" :label-width="formLabelWidth">
                              <el-select v-model="RetGrant">
                                  <el-option label="自动发放" :value=2></el-option>
                                  <el-option label="活动领取" :value=3></el-option>
                                  <el-option label="人工发放" :value=4></el-option>
                                  <el-option label="无限制" :value=5></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="开始时间：" :label-width="formLabelWidth">
                              <el-date-picker
                                      v-model="RetStartDate"
                                      type="date"
                                      placeholder="选择日期">
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="结束时间：" :label-width="formLabelWidth">
                              <el-date-picker
                                      v-model="RetEndDate"
                                      type="date"
                                      placeholder="选择日期">
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="优惠券状态：" :label-width="formLabelWidth">
                              <el-select v-model="RetOnline" placeholder="全部">
                                  <el-option label="上线" :value=2></el-option>
                                  <el-option label="下线" :value=3></el-option>
                              </el-select>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">

                      </el-col>
                  </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="reset(form)">重 置</el-button>
                  <el-button type="primary" @click="retrieve">开始检索</el-button>
              </div>
          </el-dialog>

          <el-dialog title="优惠券详情" :visible.sync="dialogFormVisible" >
              <el-form :model="form" ref="form" style="padding:0 1vw;">
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="优惠券编号:">
                              <el-input readonly="readonly" v-model="form.couponCode" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="优惠券名称:" >
                              <el-input readonly="readonly" v-model="form.couponName" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="开始时间:">
                              <el-input readonly="readonly" v-model="form.startDate" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="结束时间:">
                              <el-input readonly="readonly" v-model="form.endDate" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="优惠券状态:" >
                              <el-input readonly="readonly" v-model="form.online" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="获取方式:" >
                              <el-input readonly="readonly" v-model="form.grant" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-col :span="12">
                          <el-form-item label="优惠券数量:" >
                              <el-input readonly="readonly" v-model="form.issueQuantity" style="width:200px;"></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="20">
                      <el-form-item label="优惠券备注:">
                          <el-input readonly="readonly" type="textarea" v-model="form.note" style="width:550px;"></el-input>
                      </el-form-item>
                  </el-row>
              </el-form>
          </el-dialog>
      </div>

    <el-dialog title="高级检索" :visible.sync="retrieve2">
      <el-form :model="tableData" style="padding:0 1vw;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item class="you" label="优惠券名称:">
              <el-row class="demo-autocomplete">
                <el-col :span="17">
                  <el-autocomplete
                      class="inline-input"
                      v-model="state2"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入优惠券名称"
                      :trigger-on-focus="false"
                      @select="handleSelect"
                  ></el-autocomplete>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发放方式：" :label-width="formLabelWidth">
              <el-select v-model="RetGrant">
                <el-option label="自动发放" :value=2></el-option>
                <el-option label="活动领取" :value=3></el-option>
                <el-option label="人工发放" :value=4></el-option>
                <el-option label="无限制" :value=5></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间：" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="RetStartDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间：" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="RetEndDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优惠券状态：" :label-width="formLabelWidth">
              <el-select v-model="RetOnline" placeholder="全部">
                <el-option label="上线" :value=2></el-option>
                <el-option label="下线" :value=3></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset()">重 置</el-button>
        <el-button type="primary" @click="retrieve">开始检索</el-button>
      </div>
    </el-dialog>

    <el-dialog title="优惠券详情" :visible.sync="dialogFormVisible" >
      <el-form :model="form" ref="form" style="padding:0 1vw;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优惠券编号:">
              <el-input readonly="readonly" v-model="form.couponCode" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券名称:" >
              <el-input readonly="readonly" v-model="form.couponName" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间:">
              <el-input readonly="readonly" v-model="form.startDate" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间:">
              <el-input readonly="readonly" v-model="form.endDate" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优惠券状态:" >
              <el-input readonly="readonly" v-model="form.online" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="获取方式:" >
              <el-input readonly="readonly" v-model="form.grant" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优惠券数量:" >
              <el-input readonly="readonly" v-model="form.issueQuantity" style="width:200px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="优惠券备注:">
            <el-input readonly="readonly" type="textarea" v-model="form.note" style="width:550px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        data(){
            return{
                tableData:[],//表格数据
                databaseData:[],//数据库数据
                couponName:'',//优惠券名称
                release:'',//发放方式
                retrieve2:false, //高级检索窗true为开，flase为关闭
                refCouponName:'',//筛选优惠券名称
                refGrant:'',//筛选优惠券发放方式
                refOnline:'',//筛选优惠券状态上线/下线
                dialogFormVisible: false,//查看当前行数据
                RetCouponName:'',//高级检索优惠券名称
                couponCode:'',//高级检索优惠券编号
                RetGrant:'',//高级检索发放方式
                RetStartDate:'',//高级检索开始时间
                RetEndDate:'',//高级检索结束时间
                RetOnline:'',//高级检索优惠券状态
                state2: '',
                //查看按钮
                form: {
                    couponCode:'',
                    couponName: '',
                    startDate: '',
                    endDate: '',
                    online: '',
                    grant: '',
                    issueQuantity:'',
                },
                formLabelWidth:'120px',
                currentPage: 1, // 当前页码
                total: 1, // 总条数
                pageSize: 5, // 每页显示几条
            }
        },
        mounted(){
          this.getList();
          this.sreachData = this.tableData;
        },
        methods: {
            getList(){
                this.$http.post('/coupon/getCoupon').then(res => {
                    this.databaseData = res.data;
                    var restaurants = res.data;
                    this.tableData = this.databaseData;

                    this.tableData.map(function (val) {
                        if (val.grant == 2) {
                            val.grant = '自动发放'
                        } else if (val.grant == 3) {
                            val.grant = '活动领取'
                        } else if (val.grant == 4) {
                            val.grant = '人工发放'
                        } else if (val.grant == 5) {
                            val.grant = '无限制'
                        }
                        if (val.online == 2) {
                            val.online = true
                        } else if (val.online == 3) {
                            val.online = false
                        }
                        if (val.issueQuantity == 0) {
                            val.issueQuantity = '无限制'
                        }
                    });
                    console.log('请求成功');
                }).catch(error => {  // 请求失败
                    console.log('请求失败123');
                    console.log(error);
                })
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //监听 switch 开关状态的改变
            getState (scoped){
                let online;
                if (scoped.row.online) {
                    online = 2
                } else{
                    online = 3
                }
                console.log(scoped);
                this.$http.post('/coupon/updateCoupon?couponId='+scoped.row.couponId +'&online='+online).then(res => {

                }).catch(error => {  // 请求失败
                    console.log('请求失败');
                  })
                },
            //刷新
            refresh() {
                this.$router.go(0);
                //或
                // window.location.reload()
            },
            //返回
            returnPage(){
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/system/storageManagement" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            //高级检索
            retrieve() {
                this.retrieve2=!this.retrieve2
            },
            //高级检索重置按钮
            reset(){
              this.RetCouponName = ''
              this.RetGrant = ''
              this.RetOnline = ''
              this.RetStartDate = ''
              this.RetEndDate = ''
            },
            tableChange(filters) {
                console.log(filters);
                console.log('筛选条件变化');
                //这里根据filters，请求新数据可以实现服务器端筛选。
            },

            //筛选查询
            getScreen(){
                let data = 'couponName='+this.refCouponName+'&grant='+this.refGrant+'&online='+this.refOnline
                console.log("couponName:"+this.refCouponName+",grant:"+this.refGrant+",online:"+this.refOnline)
                // this.$http.post('/coupon/getScreen?couponName='+this.refCouponName+'&grant='+this.refGrant+'&online='+this.refOnline).then(res => {
                this.$http({
                    method: 'post',
                    url: '/coupon/getScreen',
                    data:data
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData.map(function (val) {
                        if (val.grant == 2) {
                            val.grant = '自动发放'
                        } else if (val.grant == 3) {
                            val.grant = '活动领取'
                        } else if (val.grant == 4) {
                            val.grant = '人工发放'
                        } else if (val.grant == 5) {
                            val.grant = '无限制'
                        }
                        if (val.online == 2) {
                            val.online = true
                        } else if (val.online == 3) {
                            val.online = false
                        }
                        if (val.issueQuantity == 0) {
                            val.issueQuantity = '无限制'
                        }
                    });
                    console.log('请求成功');
                }).catch(error => {  // 请求失败
                    console.log('请求失败123');
                    console.log(error);
                })
            },
            //重置按钮
            cz() {
                this.refCouponName = '',
                this.refGrant = '',
                this.refOnline = ''
                this.getScreen();
            },
            //查看表中当前行数据
            lookOver(row){
                console.log(row);
                this.dialogFormVisible = true;
                this.form.couponCode = row.couponCode;
                this.form.couponName = row.couponName;
                this.form.startDate = row.startDate;
                this.form.endDate = row.endDate;
                if(row.online) {
                    this.form.online = "上线"
                }else {
                    this.form.online = "下线"
                }
                this.form.grant = row.grant;
                this.form.issueQuantity = row.issueQuantity;
            },
            //删除表中当前行数据
            deleteLine(row) {
              //注释
                this.$http.post('/coupon/deleteCoupon?couponId='+row.couponId).then(res => {

                    console.log('删除ID:'+row.couponId+',删除成功！,返回值：');
                }).catch(error => {  // 请求失败
                    console.log('请求失败');
                });
                console.log(row);
            },
            //删除按钮
            delpop(){
                // this.$refs[`popover${index}`].visibility = false
                console.log("delpop")
            },
            //高级检索
            querySearch(queryString, cb) {
                // this.restaurants = this.tableData.map((terminal) => {
                //   console.log(this.databaseData.typeof);
                //   return {
                //     value: couponName,
                //     name: couponId,
                //   };
                // });

                var restaurants = restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            handleIconClick(ev) {
                console.log(ev);
            },
        },
    }
</script>

<style scoped>

    .list {
        background-color: #F6F7F9;
        height: 100%;
        margin: 0px -20px 0px -40px;
    }

    .header {
        margin: -20px 0px 0px 20px;
        height: 60px;
        border: 1px solid #E5E5E5;
    }

    .container {
        margin: 20px 80px 0px 20px;
        height: 60px;
        border: 1px solid #E5E5E5;
    }

    .container2 {
        margin: 0px 80px 0px 20px;
        height: 70px;
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
    }
    .con3 {
        margin-top: 10px;
    }

    .foot {
        margin: 20px 80px 0px 20px;
        height: 60px;
        border: 1px solid #E5E5E5;
    }

    .foot1 {
        margin: 0px 80px 0px 20px;
        height: 60px;
        border: 1px solid #E5E5E5;
    }

    .page {
        border: 1px solid #E5E5E5;
        margin: -1px 0px 0px 0px;;
    }

    .page2 {
        margin: 0px 0px 0px 420px;
    }

    .c1 {
        float: left;
        line-height: 40px;
        margin: 10px 0px 0px 20px;
    }

    .c2 {
        float: left;
        margin: 20px 0px 0px 30px;
    }

    .fa {
        margin-right: 60px;
    }

    .you {
        margin-left: 20px;
    }
    .cz {
        margin-left: 20px;
    }

    .b2 {
        float: right;
        margin: 10px 20px 0px 0px
    }
    .b3 {
        margin: 12px 0px 0px 900px;
    }
    .return {
        margin: 10px 0px 0px 900px;
    }
    .refush {
        margin: 0px 0px 0px 30px;
    }

</style>
